<template>
  <!-- 操作栏 -->
  <div class="header">
    <div class="header-title">
      <svg-icon name="user-list-del"></svg-icon>
      {{ $t('menus.UserListDel') }}
    </div>
    <div>
      <el-input
        v-model="queryForm.username"
        :placeholder="$t('btn.placeholder')"
        clearable
        :size="$store.getters.size"
        :prefix-icon="Search"
        class="header-input"
      ></el-input>
      <el-button
        type="primary" plain
        :icon="Search"
        :size="$store.getters.size"
        @click="initUserList"
        >{{ $t('btn.search') }}</el-button
      >
    </div>
  </div>
  <!-- 表格 -->
  <div>
    <el-table :data="tableData" stripe border :size="$store.getters.size" style="width: 100%">
      <el-table-column
        header-align="center"
        :width="item.width"
        :align="item.align"
        :prop="item.prop"
        :label="$t(`table.${item.label}`)"
        v-for="(item, index) in options"
        :key="index"
      >
        <!-- 头像 -->
        <template v-slot="{ row }" v-if="item.prop === 'avatar'">
          <el-image
            class="avatar"
            :src="apiUrl + row.avatar"
            :preview-src-list="[apiUrl + row.avatar]"
            :preview-teleported="true"
          />
        </template>
        <!-- 性别 -->
        <template v-slot="{ row }" v-if="item.prop === 'sex'" align="center">
          <el-tag :size="$store.getters.size" v-if="row.sex === 1">男</el-tag>
          <el-tag :size="$store.getters.size" v-else-if="row.sex === 2" type="success">女</el-tag>
          <el-tag :size="$store.getters.size" v-else type="info">外星人</el-tag>
        </template>
        <!-- 是否管理员 -->
        <template
          v-slot="{ row }"
          v-if="item.prop === 'is_admin'"
          align="center"
        >
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="row.is_admin"
            :size="$store.getters.size"
            disabled
          />
        </template>
        <!-- 状态 -->
        <template v-slot="{ row }" v-if="item.prop === 'status'">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="row.status"
            :size="$store.getters.size"
            :disabled="row.is_admin ? true : false"
            @change="changeUserStatus(row)"
          />
        </template>
        <!-- 操作 -->
        <template v-slot="{ row }" v-if="item.prop === 'action'">
          <el-button
            type="warning"
            :icon="RefreshRight"
            :size="$store.getters.size"
            @click="handleRestore(row)"
          >恢复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="queryForm.page_num"
      :small="$store.getters.size === 'small'? true : false"
      :page-size="queryForm.page_size"
      :page-sizes="pageSizes"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import {
  Search,
  RefreshRight,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { options } from './options'
import { getUserListDel, updateUserStatus, restoreUser } from '@/api/user.js'
import { apiUrl } from '@/utils/common.js'
import { useI18n } from 'vue-i18n'
const i18n = useI18n()

// 搜索参数
const queryForm = ref({
  username: '',
  page_num: 1,
  page_size: 10
})

// 用户数据
const tableData = ref([])
// 用户总数
const total = ref(0)
// 是否为分页按钮添加背景色
const background = ref(true)
// 每页显示个数选择器的选项设置
const pageSizes = ref([20, 30, 40, 50, 100])

// 加载用户信息
const initUserList = async () => {
  const res = await getUserListDel(queryForm.value)
  tableData.value = JSON.parse(JSON.stringify(res.data))
  total.value = res.total
}
initUserList()

// 修改用户状态
const changeUserStatus = async (row) => {
  const res = await updateUserStatus({
    id: row.id,
    status: row.status
  })
  ElMessage({
    type: res.status === 0 ? 'success' : 'error',
    message:
      res.status === 0
        ? i18n.t('message.updeteSuccess')
        : i18n.t('message.updeteFailed')
  })
}

// 恢复账号
const handleRestore = async (row) => {
  const res = await restoreUser(row.id)
  ElMessage({
    type: res.status === 0 ? 'success' : 'error',
    message:
      res.status === 0
        ? i18n.t('message.restoreSuccess')
        : i18n.t('message.restoreFailed')
  })
  res.status === 0 && initUserList()
}

// 初始化每页显示数量
const initPageSizes = () => {
  pageSizes.value.unshift(queryForm.value.page_size)
}
initPageSizes()

// 修改每页显示数量
const handleSizeChange = (pageSize) => {
  queryForm.value.page_num = 1
  queryForm.value.page_size = pageSize
  initUserList()
}

// 修改页码
const handleCurrentChange = (pageNum) => {
  queryForm.value.page_num = pageNum
  initUserList()
}
</script>
<style lang="scss" scoped>
@import './index.scss';
@import '@/styles/header.scss';
</style>
